"use client";

import React from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarMenuToggle,
  Button,
  Spacer,
} from "@heroui/react";
import { Icon } from "@iconify/react";
import { cn } from "@heroui/react";

import { AcmeIcon } from "./acme";

export default function BasicNavbar({ onClick, PressBegin }) {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  return (
    <Navbar
      isBlurred
      position="static"
      isBordered
      classNames={{
        base: cn(" bg-transparent h-[8%]", {
          "bg-default-200/50 dark:bg-default-100/50": isMenuOpen,
        }),
        wrapper: "w-full justify-center",
        item: "hidden md:flex",
      }}
      isMenuOpen={isMenuOpen}
      onMenuOpenChange={setIsMenuOpen}
    >
      {/* Left Content */}
      <NavbarBrand>
        <div className="rounded-full">
          <AcmeIcon
            size={50}
            onClick={() => {
              setIsMenuOpen(!isMenuOpen);
              console.log(isMenuOpen);
            }}
          />
        </div>
        <span className="ml-2 text-small font-mediu">ACME</span>
      </NavbarBrand>

      {/* Center Content */}

      {/* Right Content */}
      <NavbarContent className="hidden md:flex" justify="end">
        <NavbarItem className="ml-2 !flex gap-2">
          <Button
            variant="shadow"
            color="primary"
            radius="full"
            onPress={() => {}}
          >
            登录
          </Button>
          <Spacer></Spacer>
          <Button
            className="bg-foreground font-medium text-background"
            color="secondary"
            endContent={<Icon icon="solar:alt-arrow-right-linear" />}
            radius="full"
            variant="shadow"
            onPress={PressBegin}
          >
            开始
          </Button>
        </NavbarItem>
      </NavbarContent>

      <NavbarMenuToggle className="text-default-400 md:hidden" />
    </Navbar>
  );
}
